<template>
	<view class="orderdetail" :style="data.ordertype == 5 ? 'padding-bottom: 99rpx;' : ''">
		<view class="top">
			<image src='../../static/businessImg/whiteback.png' class="topback" @click="back">
			</image>
			<view class="topname">
				{{computedTitle}}
			</view>
		</view>


		<view class="addressview" v-if="data.ordertype != 5">
			<view class="addressviewname">
				{{orderDetails.userName}}
				<view class="dataphone">
					{{orderDetails.userMobile}}
				</view>
			</view>

			<view class="addressviewaddress">
				{{orderDetails.address}}
			</view>
		</view>


		<view class="prolistview" :style="data.ordertype == 5 ? 'margin-top: 0' : ''">
			<view class="prolistviewitem">
				<image :src="orderDetails.image" class="prolistimg"></image>
				<view class="prolistname">
					{{orderDetails.name}}
				</view>
				<view class="prolistsku">
					{{data.specifications}} x{{orderDetails.num}}
				</view>

				<view class="prolistnum">

				</view>

				<view class="prolistprice">
					￥{{orderDetails.price}}
				</view>
			</view>

			<view class="remaker" v-if="data.ordertype == 5">
				<view class="remakertitle">
					备注
				</view>

				<view class="remakertext">
					{{orderDetails.remake}}
				</view>
			</view>
		</view>



		<!-- 	<view class="stepview" v-if="data.ordertype == 2 || data.ordertype == 3">
			<u-steps :list="numList" :current="0" direction="column" active-color="rgb(40,199,73)"></u-steps>
		</view>
 -->



		<view class="infoview" :style="data.ordertype == 2 || data.ordertype == 3 ? 'margin-top: 40rpx' : ''"
			v-if="data.ordertype != 5">

			<view class="infoviewitem">
				<view>
					商品总额
				</view>

				<view>
					{{orderDetails.price}}
				</view>
			</view>
			<view class="infoviewitem">
				<view>
					下单时间
				</view>

				<view>
					{{orderDetails.createTime}}
				</view>
			</view>

			<view class="infoviewitem">
				<view>
					付款时间
				</view>

				<view>
					{{orderDetails.payTime}}
				</view>
			</view>


			<view class="infoviewitem" v-if="data.ordertype == 2 || data.ordertype == 3">
				<view>
					发货时间
				</view>

				<view>
					{{data.sendTime}}
				</view>
			</view>


			<view class="infoviewitem" v-if="data.ordertype == 3">
				<view>
					完成时间
				</view>

				<view>
					{{data.endTime || ''}}
				</view>
			</view>
		</view>

		<view class="infoview" v-else>
			<view class="infoviewitem">
				<view style="width: 150rpx;">
					订单地址
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{
					orderDetails.address
					}}
				</view>
			</view>

			<view class="infoviewitem">
				<view style="width: 150rpx;">
					物流公司
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.logisticsName}}
				</view>
			</view>

			<view class="infoviewitem">
				<view style="width: 150rpx;">
					订单号
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.orderNumber}}
				</view>
			</view>


			<view class="infoviewitem">
				<view style="width: 150rpx;">
					下单时间
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.createTime}}
				</view>
			</view>


			<view class="infoviewitem">
				<view style="width: 150rpx;">
					支付方式
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.payType == 1 ? '微信' : orderDetails.payType ==2 ? '支付宝' : ''}}
				</view>
			</view>



			<view class="infoviewitem">
				<view style="width: 150rpx;">
					完成时间
				</view>

				<view style="font-size: 27rpx;color: #585D6C;line-height: 36rpx;text-align: right;">
					{{orderDetails.endTime}}
				</view>
			</view>
		</view>
		<view class="lastview" v-if="data.ordertype == 5">
			<view class="lastbtn" v-if="data.orderstatus == 1" @click="handletuikuanclick">
				确认退款
			</view>

			<view class="lastbtn2" v-else>
				已完成售后
			</view>
		</view>

		<view class="btn" @click="clickConfirm" v-if="data.ordertype == 1">
			确认发货
		</view>

		<u-modal v-model="show" :show-title="false" confirm-text="确认发货" ref="uModal" cancel-text="取消"
			:show-cancel-button="true" width="623" :async-close="true" @confirm="confirm" :cancel-style="cancelstyleobj"
			:confirm-style="confirmstyleobj" @cancel="cancel" v-if="data.ordertype == 1">
			<view class="slot-content">
				<u-form :model="form" ref="uForm" label-position="top">
					<u-form-item label="快递公司">
						<u-input v-model="form.kuaidigongsi" type="select" :border="true" @click="shows = true" />
					</u-form-item>
					<u-form-item label="订单号" prop="logisticsNumber">
						<u-input v-model="form.logisticsNumber" placeholder-style="color:#C5C9D2"
							placeholder="请输入订单号" />
					</u-form-item>
					<u-form-item label="备注" prop="remark">
						<u-input v-model="form.remark" type="textarea" placeholder="请输入备注" />
					</u-form-item>
				</u-form>
			</view>
		</u-modal>


		<u-modal v-model="show2" confirm-text="确认" ref="uModal2" cancel-text="取消" title="是否确认退款"
			:show-cancel-button="true" width="618" :async-close="true" @confirm="confirm2"
			:cancel-style="cancelstyleobj" :confirm-style="confirmstyleobj" v-if="data.ordertype == 5"
			:title-style="titleObj">
			<view class="slot-content2">

			</view>
		</u-modal>


		<u-action-sheet :list="actionSheetList" v-model="shows" @click="actionSheetCallback" v-if="data.ordertype == 1">
		</u-action-sheet>
	</view>
</template>

<script>
	import {
		orderDetails,
		sendOrder,
		orderRefund
	} from '@/api/gongyingshang.js';
	import {
		expressList
	} from "@/api/gongyingshang.js"
	export default {
		data() {
			return {
				form: {
					kuaidigongsi: '顺丰快递',
					logisticsNumber: '',
					remark: ''
				},

				numList: [{
					name: '湖北武汉转运中心-已发往-湖北武汉沌口开发区 2019.02.15  10:41 星期五'
				}, {
					name: '湖北武汉转运中心-已发往-湖北武汉沌口开发区 2019.02.15  10:41 星期五'
				}, {
					name: '湖北武汉转运中心-已发往-湖北武汉沌口开发区 2019.02.15  10:41 星期五'
				}, {
					name: '湖北武汉转运中心-已发往-湖北武汉沌口开发区 2019.02.15  10:41 星期五'
				}, ],

				rules: {
					logisticsNumber: [{
						required: true,
						message: '请输入单号',
						trigger: ['blur', 'change'],
					}],
					remark: [{
						required: true,
						message: '请输入备注',
						trigger: ['blur', 'change'],
					}]
				},
				shows: false,
				actionSheetList: [

				],
				data: {},
				show: false,
				show2: false,
				orderDetails: {},
				titleObj: {
					'font-family': 'Source Han Sans CN',
					'font-weight': '500',
					'font-size': '53rpx',
					color: '#151F38'
				},
				cancelstyleobj: {
					width: '260rpx',
					height: '77rpx',
					'border-radius': '35rpx',
					'line-height': '77rpx',
					color: '#ffffff',
					'text-align': 'center',
					'font-size': '28rpx',
					'background-color': 'rgb(216,216,216)'
				},
				confirmstyleobj: {
					width: '260rpx',
					height: '77rpx',
					'border-radius': '35rpx',
					'line-height': '77rpx',
					color: '#ffffff',
					'text-align': 'center',
					'font-size': '28rpx',
					'background-color': 'rgb(146,207,56)',
					'margin-left': '33rpx'
				},
			}
		},



		onLoad(option) {
			let params = JSON.parse(decodeURIComponent(option.orderDetail));
			this.data = {
				...params
			}
		},

		onShow() {
			this.getOrderDetail();
			expressList().then(res => {

				let arr = res.data;
				let arr2 = [];
				arr.forEach(item => {
					arr2.push({
						text: item.name
					})
				})

				this.actionSheetList = arr2
			})
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},

			getOrderDetail() {
				orderDetails({
					id: this.data.id
				}).then(res => {
					this.orderDetails = res.data
				})
			},

			confirm() {

				let that = this
				this.$refs.uForm.setRules(this.rules);
				this.$refs.uForm.validate(boo => {
					if (boo) {

						sendOrder({
							logisticsName: that.form.kuaidigongsi,
							logisticsNumber: that.form.logisticsNumber,
							orderId: that.orderDetails.id,
							remark: that.form.remark
						}).then(res => {


							if (res.code == '000000') {
								that.show2 = false;
								uni.showToast({
									title: '发货成功',
									icon: 'none'
								});
								var timer = setInterval(() => {
									uni.navigateTo({
										url: '/pages/gongyingshang/daifahuopage?type=2'
									})
									clearInterval(timer)
								}, 1000)

							} else {
								that.show2 = false;
								uni.showToast({
									title: res.message,

								});
							}

							// uni.navigateTo({
							// 	url: '/pages/gongyingshang/index?current=1'
							// })
						})

					} else {
						this.$refs.uModal.clearLoading();
					}
				})
			},

			confirm2() {
				let that = this
				orderRefund({
					orderId: this.orderDetails.id,
					price: this.orderDetails.price
				}).then(
					res => {

						this.show2 = false;
						if (res.code == '000000') {
							uni.showToast({
								icon: '退款成功',
								title: res.message
							});
							var timer = setInterval(() => {
								uni.navigateTo({
									url: '/pages/gongyingshang/daifahuopage?type=5'
								})
								clearInterval(timer)
							}, 1000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							});
						}
					})

			},

			cancel() {
				this.form = {
					kuaidigongsi: '顺丰快递',
					logisticsNumber: '',
					remark: ''
				}
				this.$refs['uForm'].resetFields();
			},
			clickConfirm() {
				this.form = {
					kuaidigongsi: '顺丰快递',
					logisticsNumber: '',
					remark: ''
				}
				this.show = true;

			},
			actionSheetCallback(val) {
				this.$set(this.form, 'kuaidigongsi', this.actionSheetList[val].text)
			},
			handletuikuanclick() {
				this.show2 = true
			}
		},
		computed: {
			computedTitle() {

				if (this.data.ordertype == 1) return '买家已付款'
				if (this.data.ordertype == 2) return '商品运输中'
				if (this.data.ordertype == 3) return '订单已完成'
				if (this.data.ordertype == 5 && this.data.orderstatus == 1) return '退款中'
				if (this.data.ordertype == 5 && this.data.orderstatus == 2) return '已完成'
			}
		}
	}
</script>

<style scoped>
	.orderdetail {
		width: 100%;
		min-height: 100vh;
		/* background: #F9F9F9; */
	}

	.top {
		width: 100%;
		height: 259rpx;
		position: relative;
		background: rgb(254, 119, 12);
	}

	.top2 {}

	.topback {
		width: 16rpx;
		height: 29rpx;
		position: absolute;
		top: 106rpx;
		left: 32rpx;
	}

	.topname {
		width: 300rpx;
		height: 32rpx;
		text-align: center;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 33rpx;
		color: #FFFFFF;
		line-height: 32rpx;
		position: absolute;
		top: 105rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.addressview {
		width: 710rpx;
		height: 164rpx;
		position: relative;
		top: -50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 43rpx 30rpx 45rpx;

	}

	.addressviewname {
		width: 100%;
		height: 48rpx;
		line-height: 20rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 29rpx;
		color: #101624;
	}

	.dataphone {
		display: inline-block;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 27rpx;
		color: #9196A2;
		padding-left: 20rpx;
	}

	.addressviewaddress {
		width: 100%;
		height: 27rpx;
		line-height: 27rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 27rpx;
		color: #3D4354;
	}


	.prolistview {
		width: 708rpx;
		margin: -60rpx auto;
		background: #FFFFFF;
		padding: 27rpx 20rpx;
	}

	.prolistviewitem {
		width: 100%;
		height: 104rpx;
		margin-bottom: 28rpx;
		position: relative;
	}

	.prolistimg {
		width: 104rpx;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.prolistname {
		width: 500rpx;
		height: 27rpx;
		font-family: PingFang;
		font-weight: bold;
		font-size: 27rpx;
		color: #151F38;
		line-height: 27rpx;
		position: absolute;
		top: 5rpx;
		left: 139rpx;
	}

	.prolistsku {
		font-family: PingFang;
		font-weight: 500;
		font-size: 23rpx;
		color: #878C9A;
		height: 23rpx;
		line-height: 23rpx;
		position: absolute;
		bottom: 8rpx;
		left: 141rpx;
	}

	.prolistnum {
		font-family: PingFang;
		font-weight: 500;
		font-size: 25rpx;
		color: #878C9A;
		height: 23rpx;
		line-height: 23rpx;
		position: absolute;
		bottom: 8rpx;
		right: 140rpx;
	}

	.prolistprice {
		height: 23rpx;
		line-height: 23rpx;
		position: absolute;
		bottom: 8rpx;
		right: 2rpx;
		font-family: PingFang;
		font-weight: 500;
		font-size: 29rpx;
		color: #101624;
	}

	.remaker {
		width: 100%;
		height: 132rpx;
		border-top: 2rpx solid #f3f3f3;
	}

	.remakertitle {
		width: 100%;
		padding-top: 21rpx;
		padding-bottom: 21rpx;
		font-family: PingFang;
		font-weight: bold;
		font-size: 27rpx;
		color: #101624;
	}

	.remakertext {
		width: 100%;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 27rpx;
		color: #585D6C;
	}

	.infoview {
		width: 710rpx;
		padding: 0 21rpx;
		margin: 90rpx auto 0;
		background: #FFFFFF;
	}

	.infoviewitem {
		width: 100%;
		height: 95rpx;
		line-height: 95rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: Source Han Sans CN;
		font-weight: 500;
		font-size: 27rpx;
		color: #101624;
		border-bottom: 2rpx solid #f3f3f3;

	}

	.btn {
		width: 336rpx;
		height: 81rpx;
		text-align: center;
		line-height: 81rpx;
		margin: 80rpx auto 0;
		background: rgb(40, 199, 73);
	}

	.slot-content {
		width: 100%;
		padding: 40rpx;
		height: 700rpx;
	}

	.slot-content2 {
		width: 100%;
		height: 100rpx;
	}

	::v-deep .u-model__footer__button {
		flex: none;

	}

	::v-deep .u-model__footer {
		justify-content: space-around;
		/* padding-bottom: 20rpx; */
		height: 100rpx;
		align-items: center;
	}

	::v-deep .uni-input-input {
		/* background: rgb(244, 244, 244); */
		border-radius: 10rpx;
		/* padding-left: 10rpx; */
		border: 1rpx solid rgb(244, 244, 244);
	}

	::v-deep .u-input--border {
		padding: 0 !important;
	}

	::v-deep .uni-textarea-textarea {
		/* background: rgb(244, 244, 244); */
		border: 1rpx solid rgb(244, 244, 244);
	}


	::v-deep .u-steps .u-steps__item {
		text-align: left !important;
	}

	::v-deep .u-steps .u-steps__item__dot {
		width: 35rpx;
		height: 22rpx;
		border-radius: 0;
	}

	.stepview {
		width: 708rpx;
		margin: 0 auto;
		margin-top: 90rpx;
		padding: 0 47rpx;
		background: #FFFFFF;
	}

	.lastview {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #FFFFFF;
		height: 99rpx;
	}

	.lastbtn {
		width: 169rpx;
		height: 64rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 64rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 29rpx;
		color: #92CF38;
		border: 2rpx solid #92CF38;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 42rpx;
	}



	.lastbtn2 {
		width: 195rpx;
		height: 64rpx;
		border-radius: 30rpx;
		text-align: center;
		line-height: 64rpx;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 29rpx;
		color: #FFFFFF;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 42rpx;
		background: rgb(214, 214, 214);
	}
</style>
